<template>
	<view class="knapsack">
		<comHead :title="$t('index.qrdd')" :isLeft="true" :isRight="false" rType="knapsack"></comHead>

		<view class="knapsackNav" @click="showMa">
			<image class="dhm" src="https://siha.vxmeng.com/static/index/dhm.png" mode="widthFix"></image>
			<text>{{$t('index.dhm')}}</text>
			<image src="https://siha.vxmeng.com/static/my/r.png" mode="widthFix"></image>
		</view>
		<view class="listBox">
			
			<view class="list">
				<view class="item" v-for="(item,index) in userBuycar.list">
					<view class="l">
						<image :src="getImg(item.prop_image)" mode="aspectFill"></image>
						<view class="text">
							<text>{{item.prop_name}}</text>
							<text>{{item.prop_blurb}}</text>
						</view>
					</view>
					<view class="r">
						<view class="num">
							<image src="https://siha.vxmeng.com/static/index/shop/kuang.png" mode="aspectFill"></image>
							<text>{{item.prop_money}}</text>
							<text>{{$t('index.sidou')}}</text>
						</view>
						<view class="btn">
							<text>×{{item.num}}</text>
						</view>
					</view>
				</view>
			</view>
<!-- 			<view class="hb">
				<text>{{$t('index.hb/dyq')}}</text>
				<view class="r" @click="comLink('/pages/index/coupon')">
					<text>{{$t('index.wxhb')}}</text>
					<image src="https://siha.vxmeng.com/static/index/right.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="ms">
				<text @click="isYh = true">{{$t('index.yhsm')}}</text>
				<text>{{$t('index.yyh')}} 0.00 {{$t('index.sidou')}}</text>
			</view> -->
			<view class="count">
				<text>{{$t('index.hj')}}：</text>
				<image src="https://siha.vxmeng.com/static/index/shop/dou.png" mode="widthFix"></image>
				<text>{{userBuycar.total.total_money}}</text>
			</view>
		</view>
		
		
		<view class="account">
			<view class="l">
				<text>{{$t('index.ye')}}：\n{{parseInt(userinfo.money)}} {{$t('index.sidou')}}</text>
			</view>
			<view class="m">
				<view class="t">
					<text>{{$t('index.hj')}}：</text>
					<image src="https://siha.vxmeng.com/static/index/shop/dou.png" mode="widthFix"></image>
					<text>{{userBuycar.total.total_money}}</text>
				</view>
<!-- 				<view class="b">
					<text>{{$t('index.yyh')}}</text>
					<text>0.00</text>
					<text>{{$t('index.sidou')}}</text>
				</view> -->
			</view>
			<!-- comLink('/pages/index/order') -->
			<view class="r" @click="doUserBuycarOrder">
				<text>{{$t('index.tjdd')}}</text>
			</view>
		</view>

		<view class="popBox" v-if="isYh">

			<view class="popBoxContent">

				<view class="top">
					<image style="opacity: 0;" src="https://siha.vxmeng.com/static/index/shop/hide.png" mode="widthFix">
					</image>
					<text>{{$t('index.yhmx')}}</text>
					<image @click="isYh = false" src="https://siha.vxmeng.com/static/index/shop/hide.png"
						mode="widthFix"></image>
				</view>

				<view class="listText">
					<view class="item">
						<text>{{$t('index.spzj')}}</text>
						<text>{{userBuycar.total.total_money}}</text>
					</view>
					<view class="item">
						<text>{{$t('index.yhhj')}}</text>
						<text>0.00</text>
					</view>
					<view class="mitem">
						<text>{{$t('index.dkqdk')}}</text>
						<text>0.00</text>
					</view>
					<view class="mitem">
						<text>{{$t('index.djqdk')}}</text>
						<text>0.00</text>
					</view>

					<view class="item">
						<text>{{$t('index.hj')}}</text>
						<view class="r">
							<image src="https://siha.vxmeng.com/static/index/shop/dou.png" mode="widthFix"></image>
							<text>{{userBuycar.total.total_money}}</text>
						</view>
					</view>
				</view>

			</view>
		</view>
		
		<view class="dhPop" v-if="isdhPop">
			<view class="dhBox">
				<image src="https://siha.vxmeng.com/static/index/redeem-bg.png" mode="widthFix"></image>
				<view class="content">
					<view class="dhList">
						<view class="item" v-for="item in redeemList">
							<view class="top">
								<image :src="getImg(item.img)" mode="widthFix"></image>
							</view>
							<view class="bot">
								<text>{{item.name}}</text>
							</view>
						</view>
					</view>
					
					<view class="tit">
						<image src="https://siha.vxmeng.com/static/index/left.png" mode="widthFix"></image>
						<text>{{$t('index.cyhdjsgdhl')}}</text>
						<image src="https://siha.vxmeng.com/static/index/rig.png" mode="widthFix"></image>
					</view>
				</view>
				
				<image class="close" @click="hideDhPop" src="https://siha.vxmeng.com/static/index/close.png" mode="widthFix"></image>
			</view>
		</view>
		
		<comPop @hidePop="popObj.isPop=false" :type="popObj.type" :title="popObj.title" @sendPopFun="sendPopFun"
			:isInput="popObj.isInput" v-if="popObj.isPop"></comPop>
		<comPay v-if="isPay" @hidePay="hidePay"></comPay>
		<!-- #ifdef MP-WEIXIN || MP-TOUTIAO || MP-ALIPAY -->
			<comLack v-if="isLack" @hide="hideLack" value="10000"></comLack>
		<!-- #endif -->
		<comReward v-if="isObtain"></comReward>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isObtain: false,
				changeAmount: '',
				timer: null,
				isPay:false,
				isLack: false,
				isdhPop: false,
				redeemList:[],
				userBuycar: {},
				userinfo: {},
				isYh: false,
				user_buycar_id: [],
				popObj: {
					title: "",
					isPop: false,
					isInput: false
				},
			}
		},
		onShow() {
			if(this.$tools.getStore('share_dou')){
				this.$music.play_obtain();
				this.isObtain = true;
				this.changeAmount = 1000;
				clearTimeout(this.timer);
				this.timer = setTimeout(()=>{
					this.isObtain = false;
					this.userinfo.money = Number(this.changeAmount) + Number(this.userinfo.money);
				}, 1500);
				this.$tools.setStore('share_dou', false)
			}
			this.getUserBuycar()
			this.getUserinfo()
		},
		methods: {
			hideDhPop(){
				this.isdhPop = false
			},
			hideLack(){
				this.isLack = false
			},
			hidePay(e){
				this.isPay=false
				if(e == 1){
					this.isLack = true
				}else{
					this.getUserinfo()
				}
			},
			async doUserBuycarOrder() {
				const res = await this.$myRequest({
					url: 'api/prop/doUserBuycarOrder',
					data: {
						user_buycar_id: this.user_buycar_id.toString(),
						user_bag_id: '',
						type: ''
					}
				})
				if (res.code == 1) {
					// console.log(res)
					this.$tools.showTx(res.msg)
					setTimeout(()=>{
						const pages = getCurrentPages();
						const prevPage = pages[pages.length - 2];
						prevPage.$vm.active = 1;
						this.$tools.toBack()
					}, 500)
				}else if(res.code==0){
					this.isPay = true
				}
			},
			async getUserinfo() {
				const res = await this.$myRequest({
					url: 'api/user/index',
					data: {}
				})
				if (res.code == 1) {
					console.log(res)
					this.userinfo = res.data
				}
			},
			async getUserBuycar() {
				const res = await this.$myRequest({
					url: 'api/prop/getUserBuycar',
					data: {}
				})
				if (res.code == 1) {
					this.userBuycar = res.data
					for (let s of this.userBuycar.list) {
						this.user_buycar_id.push(s.id)
					}
				}
			},
			async sendPopFun(e) {
				console.log(e)
				if (e.type == 'dhm') {
					const res = await this.$myRequest({
						url: 'api/prop/doUserRedeemCode',
						data: {
							order_no:e.value
						}
					})
					if (res.code == 1) {
						this.popObj.isPop = false
						this.redeemList = res.data.split('|').reduce((acc, item) => {
							let [id, name, img, price] = item.split(',');
							let existingItem = acc.find(element => element.id === id);
							if (existingItem) {
								existingItem.num++;
							} else {
								if (id === '1.1') {
									name = price + name
									acc.push({ id, name, img: '/static/index/dou.png', price, num: 1 });
								} else {
									name += ' X 2'
									acc.push({ id, name, img, price, num: 1 });
								}
							}
							return acc;
						}, []);
						console.log(this.redeemList);
						this.isdhPop = true
					}
				}
			},
			showMa() {
				this.popObj = {
					title: this.$t('index.dhm'),
					isPop: true,
					isInput: true,
					type: 'dhm'
				}
			},

		}
	}
</script>

<style lang="less" scoped>
	.knapsack {
		min-height: 100vh;

		.knapsackNav {
			// width: 160rpx;
			height: 60rpx;
			// background: rgba(255, 255, 255, 0.1);
			border-radius: 24rpx 0px 0px 24rpx;
			color: #D8D8D8;
			font-size: 28rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0 20rpx;
			margin-top: 20rpx;

			text {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				overflow: hidden;
				-webkit-line-clamp: 1;
				text-overflow: ellipsis;
			}

			image {
				width: 40rpx;
			}

			.dhm {
				margin-right: 20rpx;
			}
		}

		.tabs {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.item {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 50%;

				text {
					display: inline-flex;
					color: #D8D8D8;
					font-size: 28rpx;
					border-bottom: 4rpx solid rgba(#000, 0);
					padding: 10rpx 0;

					&.on {
						color: #fff;
						font-size: 32rpx;
						border-bottom: 4rpx solid #D8D8D8;
					}
				}
			}
		}
		.listBox{
			/* #ifdef MP-WEIXIN */
			height: calc(100vh - 400rpx);
			/* #endif */
			/* #ifdef APP */
			// height: calc(100vh - 400rpx);
			/* #endif */
			overflow: auto;
		}
		.list {
			width: 100%;
			display: flex;
			align-items: center;
			flex-direction: column;

			.item {
				width: 690rpx;
				padding: 20rpx;
				background-color: rgb(31, 34, 40);
				box-sizing: border-box;
				background: linear-gradient(137deg, rgba(#222222, 0.65) 0%, rgba(30, 36, 44, 0.65) 100%);
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 20rpx;

				.l {
					display: flex;
					align-items: center;

					image {
						width: 112rpx;
						height: 112rpx;
						background: #eee;
						border-radius: 10rpx;
					}

					.text {
						color: #fff;
						font-size: 32rpx;
						display: flex;
						flex-direction: column;
						width: 350rpx;
						margin-left: 20rpx;

						text {
							&:nth-child(2) {
								color: #999999;
								font-size: 24rpx;
								margin-top: 20rpx;
							}
						}
					}
				}

				.r {
					display: flex;
					flex-direction: column;
					align-items: flex-end;

					.num {
						width: 144rpx;
						height: 52rpx;
						position: relative;
						display: flex;
						align-items: center;
						justify-content: center;

						image {
							width: 100%;
							height: 100%;
							position: absolute;
							top: 0;
							left: 0;
						}

						text {
							color: #FFD673;
							font-size: 36rpx;
							margin-top: 10rpx;

							&:nth-child(3) {
								font-size: 20rpx;
								margin-left: 5rpx;
							}
						}
					}

					.btn {
						display: flex;
						align-items: center;
						justify-content: center;
						color: #999;
						font-size: 28rpx;
						margin-top: 40rpx;
					}
				}
			}
		}

		.popBox {
			width: 100%;
			height: 100vh;
			background: rgba(#000, 0.6);
			position: fixed;
			top: 0;
			left: 0;

			.popBoxContent {
				background: #000B1B;
				position: fixed;
				bottom: 160rpx;
				width: 100%;

				.top {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 36rpx;
					color: #D8D8D8;
					font-weight: bold;
					padding: 30rpx 30rpx 20rpx 30rpx;
					box-sizing: border-box;

					image {
						width: 35rpx;
					}
				}

				.gwc {
					max-height: 900rpx;
					height: auto;
					overflow: auto;
				}

				.listText {
					display: flex;
					flex-direction: column;
					padding: 0 30rpx;
					box-sizing: border-box;

					.item {
						color: #D8D8D8;
						font-size: 32rpx;
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;

						image {
							width: 20rpx;
							margin-right: 20rpx;
						}

						margin: 10rpx 0;
					}

					.mitem {
						color: #D8D8D8;
						font-size: 28rpx;
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin: 10rpx 0;

						text {
							&:nth-child(1) {
								margin-left: 30rpx;
							}
						}
					}
				}
			}
		}

		.hb {
			font-size: 32rpx;
			color: #D8D8D8;
			padding: 30rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.r {
				width: 360rpx;
				height: 48rpx;
				border-radius: 60rpx;
				background: linear-gradient(104deg, #00A6FE 20%, #854EFF 85%);
				font-size: 24rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				text {
					display: inline-flex;
					width: 80%;
					text-align: center;
				}

				image {
					width: 20rpx;
					margin-left: 10rpx;
				}
			}
		}

		.ms {
			font-size: 28rpx;
			color: #D8D8D8;
			padding: 30rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;

			text {
				&:nth-child(1) {
					text-decoration: underline;
				}
			}
		}

		.count {
			padding: 30rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: flex-end;
			align-items: baseline;

			image {
				width: 24rpx;
			}

			text {
				&:nth-child(1) {
					font-size: 28rpx;
					color: #D8D8D8;
					margin: 0 10rpx;
				}

				&:nth-child(3) {
					font-size: 48rpx;
					color: #fff;
					margin-left: 10rpx;
				}
			}
		}

		.account {
			width: 750rpx;
			height: 160rpx;
			background: #000B1B;
			box-shadow: 0px -2px 8rpx 0px rgba(0, 0, 0, 0.3);
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 101;
			padding: 0 30rpx;
			box-sizing: border-box;

			.l {
				font-size: 24rpx;
				color: #A2A2A2;
				width: 130rpx;
			}

			.m {
				display: flex;
				justify-content: flex-end;
				flex-direction: column;
				flex: 1;
				text-align: center;
				image {
					width: 24rpx;
				}

				.t {
					text {
						&:nth-child(1) {
							font-size: 28rpx;
							color: #D8D8D8;
							// margin: 0 10rpx;
						}

						&:nth-child(3) {
							font-size: 48rpx;
							color: #fff;
							margin-left: 10rpx;
						}
					}
				}

				.b {
					display: flex;
					align-items: center;
					justify-content: flex-end;

					text {
						font-size: 24rpx;
						color: #767B82;

						&:nth-child(2) {
							color: #FFD673;
						}
					}
				}
			}

			.r {
				width: 230rpx;
				height: 80rpx;
				background: linear-gradient(113deg, #00A6FE 18%, #854EFF 86%);
				border-radius: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0 10rpx;
				box-sizing: border-box;

				image {
					width: 28rpx;
				}

				>text {
					font-size: 28rpx;
					color: #fff;
					display: inline-flex;
					width: 100%;
					align-items: center;
					justify-content: center;
					flex-shrink: 0;
				}
			}
		}
		
		.dhPop{
			width: 100vw;
			height: 100vh;
			position: fixed;
			top: 0;
			left: 0;
			background-color: rgba(#000, 0.5);
			color: #fff;
			z-index: 103;
			.dhBox{
				width: 566rpx;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				>image{
					width: 100%;
					vertical-align: middle;
				}
				
				.content{
					width: 100%;
					position: relative;
					top: -24rpx;
					padding: 50rpx 20rpx 20rpx;
					z-index: -1;
					background: linear-gradient(180deg, #D614FF -82%, rgba(147, 86, 255, 0.93) -29%, #5888FF -5%, #985FFE 18%, #307EFE 152%);
					border-radius: 40rpx;
					
					.dhList{
						width: 100%;
						display: flex;
						flex-wrap: wrap;
						justify-content: space-evenly;
						.item{
							width: 160rpx;
							height: 220rpx;
							border: 4rpx solid #FFC41F;
							border-radius: 20rpx;
							margin-bottom: 20rpx;
							position: relative;
							background: #5438D0;
							overflow: hidden;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							
							.top{
								flex: 1;
								width: 100%;
								display: flex;
								justify-content: center;
								align-items: center;
								>image{
									width: 100rpx;
								}
							}
							
							.bot{
								height: 60rpx;
								width: 100%;
								background: #5F64FC;
								display: flex;
								align-items: center;
								justify-content: center;
							}
						}
					}
					
					.tit{
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 28rpx;
						image{
							width: 60rpx;
							position: static;
						}
						text{
							margin: 16rpx;
						}
					}
				}
				
				.close{
					width: 50rpx;
					display: block;
					margin: 20rpx auto;
				}
			}
		}
	}
</style>